<template>
	<view class="content bgc-f0">
		<view class="bgc-fff p40">
			<view class="z-flex">
				<u-image :src="userInfo.cover" width="100" height="100" border-radius="6" />
				<view class="flex-1 z-flex z-flex-between ml20" style="flex-direction: column;position: relative;">
					<view v-if="loginStatus" class="z-flex">
						<view><text class="fs30 fwb" style="letter-spacing: 3rpx;">{{userInfo.name}}</text></view>
						<view class="_member ml6"><text>{{getRoleInfo()}}</text></view>
					</view>
					<view v-if="loginStatus && member.length > 0" @click="handOpenMember" class="fs24 c-999 mt10">
						<text v-if="memberName">店铺：{{memberName}}</text>
						<text v-else>切换店铺</text>
					</view>
					<view v-if="!loginStatus" @click="toViewInfo" style="position: absolute;top: 50%;transform: translateY(-50%);">
						<text class="mr5 c-666">去登录</text>
						<u-icon name="arrow-right" color="#666666" size="22" style="position: relative;top:-4rpx;"></u-icon>
					</view>
				</view>
			</view>
			
			<view v-if="loginStatus" @click="toViewInfo" class="z-flex z-flex-align-c c-333 fs24 mt20">
				<view class="flex-1">
					<text>ID: {{userInfo.id}}</text>
				</view>
				<view style="flex: 1.5;">
					<text>手机号: {{userInfo.phone}}</text>
				</view>
				<view class="t-r" style="width: 140rpx;">
					<text class="mr4">详细信息</text>
					<u-icon name="arrow-right" color="#666666" size="22" style="position: relative;top:-3rpx;"></u-icon>
				</view>
				
			</view>
		</view>
		<!--style="transform: translateY(-95rpx);"-->
		<view class="p20">
			<!-- <view  class="_reward">
				<view class="flex-1">
					<view class="z-flex">
						<u-image src="@/static/icon/jf.png" width="48rpx" height="48rpx"></u-image>
						<text class="ml10 mr10">我的积分</text>
						<u-icon name="arrow-right" color="#ffffff" size="24" style="position: relative;top: -4rpx;"></u-icon>
					</view>
					<view>
						<text class="fs36 ml58">0</text>
					</view>
				</view>
					
				<view class="flex-1">
					<view class="z-flex">
						<u-image src="@/static/icon/dt.png" width="48rpx" height="48rpx"></u-image>
						<text class="ml10 mr10">奖励记录</text>
						<u-icon name="arrow-right" color="#ffffff" size="24" style="position: relative;top: -4rpx;"></u-icon>
					</view>
					<view>
						<text class="fs36 ml58">0</text>
					</view>
				</view>
			</view> -->

			<!--订单中心-->
			<view class="br12 pt30 pl30 pr30 bgc-fff mt10">
				<view class="z-flex z-flex-between z-flex-align-c" @click="toViewOrder(0)">
					<text class="c-333">订单中心</text>
					<text class="fs24 c-999 mr4" style="margin-left: auto;">查看全部订单</text>
					<u-icon name="arrow-right" color="#999999" size="20" style="position: relative;top:-1rpx;"></u-icon>
				</view>

				<view class="z-flex z-flex-around mt30">
					<template v-for="(item,index) in orderStatus">
						<view class="z-flex z-flex-align-c mb30" style="flex-direction: column;width: 25%;" :key="index" @click="toViewOrder(item.id)">
							<u-image :src="'/static/icon/'+item.icon+'.png'" width="58" height="58" />
							<view class="mt10"><text class="fs24 c-666">{{item.name}}</text></view>
						</view>
					</template>
				</view>
			</view>
			
			<!--推广-->
			<view class="br12 pt30 pl30 pr30 bgc-fff mt30">
				<view class="z-flex z-flex-between z-flex-align-c">
					<text class="c-333">功能中心</text>
				</view>
			
				<view class="z-flex mt30" style="flex-wrap: wrap;">
					<template v-for="(it, ind) in selfFunc">
						<template v-if="it.name == '门店流水'?userInfo.role && userInfo.role == 2:true">
							<view class="z-flex z-flex-align-c mb30" style="flex-direction: column;width: 25%;" :key="ind" @click="handSelfFunc(ind)">
								<u-image :src="'/static/icon/'+it.icon+'.png'" width="58" height="58" />
								<view class="mt10"><text class="fs24 c-666">{{it.name}}</text></view>
							</view>
						</template>
					</template>
				</view>
			</view>

			<!--后台中心-->
			<view v-if="storeInfo && storeInfo.isLb" class="br12 pt30 pl30 pr30 bgc-fff mt30">
				<view class="z-flex z-flex-between z-flex-align-c">
					<text class="c-333">门店中心</text>
				</view>

				<view class="z-flex mt30">
					<template v-for="(item,index) in storeList">
						<view class="z-flex z-flex-align-c mb30" style="flex-direction: column;width: 25%;" :key="index" @click="toViewStore(item)">
							<u-image :src="'/static/icon/'+item.icon+'.png'" width="58" height="58" />
							<view class="mt10"><text class="fs24 c-666">{{item.name}}</text></view>
						</view>
					</template>
				</view>
			</view>
			
			<!--后台管理 -->
			<view v-if="userInfo.role && userInfo.role == 3" class="br12 mt30 c-666" style="overflow: hidden;">
				<u-grid :col="2">
					<u-grid-item @click="gotoPage('mapPages/backAdmin/store_list/index')">
						<u-icon name="home-fill" :size="46" color="#1abc9c"></u-icon>
						<view class="mt20">门店管理</view>
					</u-grid-item>
					<u-grid-item
						@click="gotoPage('mapPages/backAdmin/banner_list/index')">
						<u-icon name="setting-fill" :size="46" color="#1abc9c"></u-icon>
						<view class="mt20">Banner配置</view>
					</u-grid-item>
					<u-grid-item
						@click="gotoPage('mapPages/backAdmin/pro_divide/index')">
						<u-icon name="plus-people-fill" :size="46" color="#1abc9c"></u-icon>
						<view class="mt20">产品分账配置</view>
					</u-grid-item>
					<u-grid-item
						@click="gotoPage('mapPages/backAdmin/test_water/index')">
						<u-icon name="rmb-circle-fill" :size="46" color="#1abc9c"></u-icon>
						<view class="mt20">公司收入查询</view>
					</u-grid-item>
				</u-grid>
			</view>
			
		</view>

		<!--用户协议-->
		<u-popup v-model="agreementPopup" mode="bottom" border-radius="16">
			<view>
				<scroll-view scroll-y="true" style="height: 800rpx;">
				<view class="fs32 c-333 t-c pt30">用户服务协议及隐私政策</view>
				<view class="c-666 fs22 p30" style="line-height: 40rpx;">
					<view style="text-indent: 2em;">
						聚梦成 客连连尊重并保护所有使用聚梦成 客连连后续聚梦成 客连连服务的用户 (以下称为“您”) 个人隐私与信息安全。鉴于此，我们制定本《聚梦成 客连连信息隐私说明》 (以下称为“本说明”) 与您确认关于您在申请业务以及后续使用期间，聚梦成 客连连存储、使用、披露和保护您的个人信息的相关事宜。本隐私权说明将帮助您了解以下内容:
					</view>
					<view>1、如何收集您的个人信息</view>
					<view>2、如何使用、披露、存储您的个人信息</view>
					<view>3、信息存储和交换</view>
					<view>4、隐私协议的修订和通知</view>
					<view>5、变更</view>
					<view>5、如何联系我们</view>
					<view>
						请您在申请聚梦成 客连连 (以下称为聚梦成 客连连) 前，完整阅读
						并透彻理解本说明，在您充分理解并同意后使用聚梦成 客连连业务
						如果您不同意本说明的任何内容，您应立即停止申请聚梦成 客连连产
						品。当您申请使用聚梦成 客连连产品时，则表示您同意且完全理解本
						个人信息隐私保护说明的全部内容。</view>
					<view class="fs26" style="line-height: 50rpx;">
						一、如何收集您的个人信息您的个人信息来源于您申请聚梦成 客连连的信息以及聚梦成 客连连已有的您作为青丘掌门
					</view>
					<view style="text-indent: 2em;">
						a)您根据申请聚梦成 客连连要求提供的个人信息。包括您的真实
						姓名、身份证号码、手机号码。 您使用平台申请所收集到的信息
						b)除您在申请聚梦成 客连连时提供的个人信息外，我们还可能会
						记录您在申请时提供、形成或留存的信息，包括但不限于设备信
						息、日志信息、网络和连接信息、Cookie数据等。
					</view>
					<view style="text-indent: 2em;">
					b)除您在申请聚梦成 客连连时提供的个人信息外，我们还可能会
					记录您在申请时提供、形成或留存的信息，包括但不限于设备信
					息、日志信息、网络和连接信息、Cookie数据等。
					</view>
					<view class="fs26" style="line-height: 50rpx;">
						二、如何使用、披露、存储您的个人信息使用
					</view>
					<view>
						1.信息使用
					</view>
					<view style="text-indent: 2em;">
						a)您个人信息，手机号码，用于聚梦成 客连连注册账号申请。
					</view>
					<view style="text-indent: 2em;">
						b)您的身份证信息将用于实名认证，实名认证后将与账号绑定。
					</view>
					<view>
						2.信息披露
					</view>
					<view class="fs24">
						在如下情况下，我们将披露您的个人信息
					</view>
					<view style="text-indent: 2em;">
						a)a)经您事先同意，向第三方披露。
					</view>
					<view style="text-indent: 2em;">
						b)基于国家、公共利益及安全，依照法律及合法程序，产品将向有权的司法机关、行政机关或有关个人披露您的个人信息，或依照法院裁决、判决或 政府机关的强制要求执行相关行为。请您知悉，上述国家包括但不限于中华人民共和国或其他产品开展业务的国家及相关法律法规。
					</view>
					<view>
						3.信息存储和交换
					</view>
					<view style="text-indent: 1em;">
						(1) 信息存储地点
					</view>
					<view style="text-indent: 2em;">
						我们会按照法律法规规定，将境内收集的用户个人信息存储于中国境内。如果你的个人信息存储地点从中国境内转移到境外的，我们将严格依照法律的规定执行。收集的有关您的信息和资料将保存在聚梦成 客连连的服务器上。
					</view>
					<view style="text-indent: 1em;">
						(2) Cookie的使用
					</view>
					<view style="text-indent: 2em;">
						a)在您未拒绝接受cookies的情况下，产品会在您的手机上设
						定或取用cookies，以便您能登录或使用依赖于cookies的产品平台
						服务或功能。产品使用cookies可为您提供更加周到的个性化服
						务，包括推广服务。
					</view>
					<view style="text-indent: 2em;">
						b)您有权选择接受或拒绝接受cookies。您可以通过修改浏览
						器设置的方式拒绝接受cookies。但如果您选择拒绝接受cookies,
						则您可能无法登录或使用依赖于cookies的产品网络服务或功能
					</view>
					<view style="text-indent: 2em;">
						c)通过产品所设cookies所取得的有关信息，将适用本协议。
					</view>
					<view style="text-indent: 1em;">
						(2) 信息存储期限
					</view>
					<view style="text-indent: 2em;">
						一般而言，我们仅在为实现目的所必需的时间及法律、行政法
						规所规定的保存期限内保留你的个人信息。
						当我们的产品、服务发生停止运营或者超期的情形时，我们将
						以推送通知、公告等形式通知你，并在合理的期限内删除你的个人
						信息或进行匿名化处理。 (本指引中的“匿名化处理”，是指通过
						对个人信息的技术处理，使得个人信息主体无法被识别，且处理后
						的信息不能被复原的过程。个人信息经匿名化处理后所得的信息不
						属于个人信息。)
					</view>
					<view>
						4.信息安全
					</view>
					<view style="text-indent: 2em;">
						我们努力为用户的信息安全提供保障，以防止信息的丢失、不
						当使用、篡改、未经授权访问或披露。
					</view>
					<view style="text-indent: 2em;">
						我们将在合理的安全水平内使用各种安全保护措施以保障信息
						的安全。例如，我们会使用加密技术 (例如，SSL) 、
						去标识化、匿名化处理等手段来保护你的个人信息。
					</view>
					<view style="text-indent: 2em;">
						我们通过不断提升的技术手段加强安装在你设备端的软件的安
						全能力，以防止你的个人信息泄露。例如，我们为了安全传输会在
						你设备本地完成部分信息加密的工作;为了预防病毒、木马程序或
						其他恶意程序、网站，我们可能会了解你设备安装的应用信息、正
						在运行的进程信息或设备内存中寄存的数据;为了预防诈骗、盗
						号、仿冒他人等不法行为和进行安全检查可能会分析利用唯一设备标识符、登录IP地址、操作日志、位置信息等数据，以便于采取安全措施或进行安全提醒等。
					</view>
					<view style="text-indent: 2em;">
						我们建立专门的管理制度、操作规程和组织以保障信息的安
						全。例如，我们严格限制访问信息的人员范围，要求他们遵守保密
						义务，并进行审计。此外，腾讯还会设立主要由外部成员组成的独
						立机构对我们的个人信息保护情况进行监督。
					</view>
					<view style="text-indent: 2em;">
						若发生个人信息泄露等安全事件，我们会启动应急预案及补救
						措施，阻止安全事件扩大，并依法履行相关的报告及通知义务。
					</view>
					<view style="text-indent: 2em;">
						我们会尽力保护你的个人信息。我们也请你理解，任何安全措
						施都无法做到无懈可击。
					</view>
					<view class="fs26" style="line-height: 50rpx;">
						三、个人信息保障措施
					</view>
					<view style="text-indent: 2em;">
						我们将采取符合业界标准、合理可行的安全防护措施保护您提
						供的个人信息安全，防止您的个人信息遭到未经授权访问、公开披
						露、使用、修改、损坏或丢失。我们会以高度的勤勉义务对待您的
						信息，未经您同意，我们不会向第三方共享您的信息。也请您谨慎
						向第三方提供您的个人信息。如您发现自己在申请聚梦成 客连连过程
						中存储的个人信息泄密，请您立即联络我方，以便我方采取相应措
						施。
					</view>
					<view class="fs26" style="line-height: 50rpx;">
						四、个人信息保护说明的修订
					</view>
					<view style="text-indent: 2em;">
						我们可能对本说明进行不定期修改，因此请经常查看。说明修
						改后，产品将在相关页面或以其他合适的方式公布修改的内容。如
						果您不同意本说明的修改，请立即停止申请聚梦成 客连连或取消已经
						获得的聚梦成 客连连服务;如果您选择在本说明修改后继续申请青丘
						掌门人服务的，则视为您已接受本说明的修改。
					</view>
					<view style="text-indent: 2em;">
						您与聚梦成 客连连签署的本说明所列明的条款，并不能完全涵盖
						您与聚梦成 客连连产品所有的关于个人信息的权利和义务。因此，产
						品公布其他声明、规则等均视为本说明之外的补充条款，为本协议
						不可分割的组成部分，与本说明具有同等法律效力。
					</view>
					<view class="fs26" style="line-height: 50rpx;">
						五、变更
					</view>
					<view style="text-indent: 2em;">
						我们可能会适时对本指引进行修订。当指引的条款发生重大变
						更时，我们会在你登录及版本更新时以推送通知、弹窗或其他符合
						法律要求的适当形式向你展示变更后的指引。
					</view>
					<view style="text-indent: 2em;">
						按照法律法规及不低于本指引所要求的标准继续保护或要求新
						的处理者继续保护你的个人信息。
					</view>
					<view class="fs26" style="line-height: 50rpx;">
						六、如何联系我们
					</view>
					<view style="text-indent: 2em;">
						如您对本说明有任何疑问、建议或意见的，或您发现您的个人
						信息可能被泄露的，您可通过拨打023-65030758反馈联系我们
					</view>
					<view style="text-indent: 2em;">
						本说明的生效、履行、解释及争议的解决，您因使用青丘掌门
						人和服务而产生或与本说明相关的一切争议、权利主张或其他事
						项，均适用中华人民共和国法律 (港澳台地区除外)。您与产品平
						台发生的一切争议，应友好协商，如协商不成的，可选择将争议提
						交说明签订地人民法院诉讼管辖；
					</view>
					<view style="text-indent: 2em;">
						请您再次确认您已全部阅读并充分理解上述条款，谢谢。
					</view>
					<view style="text-indent: 2em;">
						本人已详细阅读上述全部内容，并充分理解，同时完全同意青
						丘掌门人关于信息的搜集、使用、披露、存储及保护措施并自愿遵
						守相关规定，特此确认!
					</view>
				</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<u-popup mode="left" v-model="showMember">
			<view class="_mem">
				<template v-for="it in member">
					<view :class="['_lis',(businessId && businessId == it.businessId)?'c-theme':'']" :key="it.id" @click="handClose(it)">
						<text>{{it.businessName}}</text>
						<!-- <u-icon name="arrow-right" size="24" color="#999999"></u-icon> -->
					</view>
				</template>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getUserInfoApi } from './api/index.js'
	import { changeBusinessApi } from '@/api/shop.js'
	import { getBusinessMemberApi } from '@/api/user.js'
	export default {
		data() {
			return {
				showMember: false,
				member: [],
				memberName: '',
				userInfo: {},
				storeInfo: {},
				agreementPopup: false,
				loginStatus: null,
				businessId: uni.getStorageSync('businessId'),
				orderStatus: [{
					name: '待支付',
					icon: 'o_1',
					id: 1
				}, {
					name: '已支付',
					icon: 'o_2',
					id: 2
				}, {
					name: '使用中',
					icon: 'o_3',
					id: 3
				}, {
					name: '已完成',
					icon: 'o_4',
					id: 4
				}],
				selfFunc: [{
					name: '推广二维码',
					icon: 'u_1'
				}, {
					name: '已购买产品',
					icon: 'u_2'
				}, {
					name: '我的分享',
					icon: 'u_3'
				}, {
					name: '流水查询',
					icon: 'u_4'
				}, {
					name: '用户协议',
					icon: 'u_5'
				}, {
					name: '门店流水',
					icon: 'o_4'
				}],
				storeList: [{
						name: '店铺流水',
						url: 'store_stream',
						icon: 's_1'
					},
					{
						name: '店铺产品',
						url: 'store_pro',
						icon: 's_2'
					},
					// {
					// 	name: '统计看板',
					// 	url: 'store_board',
					// 	icon: 's_3'
					// },
					{
						name: '我的店铺',
						url: 'store_info',
						icon: 's_4'
					},
				]
			}
		},
		async onShow() {
			await this.$onLaunched
			this.getUserInfo()
		},
		methods: {
			async getUserInfo(isGetMember = true){
				this.loginStatus = uni.getStorageSync('openid')
				if(!this.loginStatus) return
				const {code,data} = await getUserInfoApi({
					openId: uni.getStorageSync('openid')
				})
				if(code != 0) return
				this.userInfo = data
				isGetMember && this.getMember()
			},
			// 获取门店信息
			async getMember(){
				const {code,data} = await getBusinessMemberApi({
					memberId: Number(uni.getStorageSync('userId'))
				})
				if(code != 0) return
				this.member = data.list
				if(data.list.length == 0) return
				const storeInfo = data.list.filter(it=>it.businessId == this.businessId)
				if(storeInfo.length > 0){
					this.storeInfo = storeInfo[0]
					this.memberName = storeInfo[0].businessName
				}else{
					this.storeInfo = data.list[0]
					this.memberName = data.list[0].businessName
				}
			},
			getRoleInfo(){
				// 1、店小二-v1 2、经销商-v2 3、管理员-v3 4、店掌柜-v4
				let str = '店掌柜'
				if(this.userInfo.role == 1){
					str = '店小二'
				}else if(this.userInfo.role == 2){
					str = '经销商'
				}else if(this.userInfo.role == 3){
					str = '管理员'
				}
				return str
			},
			async handClose(e){
				const { businessId, businessName } = e
				this.showMember = false
				this.memberName = businessName
				this.businessId = Number(businessId)
				this.storeInfo = e
				uni.setStorageSync('businessId',Number(businessId))
				uni.setStorageSync('userUrl','')
				const {code,data} = await changeBusinessApi({
					businessId: Number(businessId),
					userId: Number(uni.getStorageSync('userId'))
				})
				this.getUserInfo(false)
			},
			handOpenMember(){
				return
				if(this.member.length > 0){
					this.showMember = true
				}
			},
			toViewStore({url}) {
				if(this.$isLogin()){
					uni.$u.route({
						type: 'navigateTo',
						url: `mapPages/backAdmin/${url}/index`,
						params: {
							id: this.storeInfo.businessId
						}
					})
				}
				
			},
			toViewOrder(id) {
				if(this.$isLogin()){
					uni.$u.route({
						type: 'navigateTo',
						url: 'mapPages/order/index',
						params: {
							id
						}
					})
				}
			},
			toViewInfo(){
				if(this.$isLogin()){
					uni.$u.route({
						type: 'navigateTo',
						url: 'mapPages/user_info/index'
					})
				}
				
			},
			gotoPage(url){
				if(this.$isLogin()){
					uni.$u.route({
						type: 'navigateTo',
						url
					})
				}
				
			},
			returnRole(){
				return this.userInfo.role && [2,3].includes(this.userInfo.role)
			},
			handSelfFunc(ind) {
				if([0,1,2,3,5].includes(ind)){
					if(this.$isLogin()){
						switch (ind) {
							case 0:
								if(!this.userInfo.lsUser){
									return uni.showToast({
										title: '请先到个人资料页面完成实名认证',
										icon: 'none'
									})
								}
								if(!this.userInfo.lsCard){
									return uni.showToast({
										title: '请先到个人资料页面完成银行卡绑定',
										icon: 'none'
									})
								}
								if(this.member.length == 0){
									return uni.showToast({
										title: '请先成为店小二',
										icon: 'none'
									})
								}
								if(this.userInfo.businessId == 0){
									return uni.showToast({
										title: '请先切换门店',
										icon: 'none'
									})
								}
								uni.$u.route({
									type: 'navigateTo',
									url: 'mapPages/promotion/index'
								})
								break;
							case 1:
								uni.$u.route({
									type: 'navigateTo',
									url: 'mapPages/emption/index'
								})
								break;
							case 2:
								uni.$u.route({
									type: 'navigateTo',
									url: 'mapPages/my_sharing/index'
								})
								break;
							case 3:
								uni.$u.route({
									type: 'navigateTo',
									url: 'mapPages/running_water/index'
								})
								break;
							case 5:
								uni.$u.route({
									type: 'navigateTo',
									url: 'mapPages/dealer_water/index'
								})
								break;
							default:
								break;
						}
					}
				}else{
					this.agreementPopup = true
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {

		._member {
			border-radius: 30rpx;
			background-color: #ED2040;
			font-size: 24rpx;
			color: #FFFFFF;
			padding: 2rpx 14rpx;
		}
		
		._mem{
			padding-top: 20rpx;
			._lis{
				padding: 0 24rpx;
				text-align: left;
				margin-bottom: 20rpx;
			}
		}

		._ewm {
			width: 140rpx;
			// height: 140rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		._reward {
			display: flex;
			background-color: $uni-color-theme;
			padding: 30rpx;
			color: #fff;
			border-radius: 12rpx;
		}

		._li {
			flex: 1;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;

			._tg {
				width: 170rpx;
				height: 170rpx;
				border-radius: 50%;
				background-color: rgba(35, 187, 179, .4);
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 10rpx;

				._box {
					width: 150rpx;
					height: 150rpx;
					background-color: #FFFFFF;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		._li:nth-of-type(3n-1) {
			flex: 2;
		}


	}
</style>
